import React, { Component } from "react";

//通用列表
export default class TableList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstLoading: true
    };
  }
  componentWillReceiveProps() {
    //列表第一次挂载为true,其他为false
    this.setState({
      firstLoading: false
    });
  }
  render() {
    //表头信息
    let tableHeader = this.props.tableHeads.map((tableTitle, index) => {
      if(typeof tableTitle === 'object'){
      return <th key={index} width={tableTitle.width} className="text-center">{tableTitle.name}</th>;
      }else if(typeof tableTitle === 'string'){
      return <th key={index}>{tableTitle}</th>;

      } 
    });
    //列表内容
    let listBody = this.props.children;
    //列表信息
    let listInfo = (
      <tr>
        <td colSpan={tableHeader.length} className="text-center">
          {this.state.firstLoading ? "正在加载数据..." : "没有找到相应结果"}
        </td>
      </tr>
    );
    let tableBody = listBody.length > 0 ? listBody : listInfo;
    return (
      <div className="row">
        <div className="col-md-12">
          <table className="table table-hover table-bordered">
            <thead>
              <tr className="info">{tableHeader}</tr>
            </thead>
            <tbody>{tableBody}</tbody>
          </table>
        </div>
      </div>
    );
  }
}
